<template>
  <a-config-provider prefix-cls="ss">
    <div class="script-wrapper">
      <a-drawer
        v-model:visible="visible"
        class="custom-class"
        :width="800"
        title="导入脚本"
        placement="right"
        :getContainer="getContainer"
        zIndex="15"
      >
        <h3>我的脚本</h3>
        <!-- 列表 -->
        <a-table
          :dataSource="list"
          :columns="columns"
          :pagination="pagination"
          @change="handleTableChange"
          :loading="loading"
          rowKey="id"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key == 'title'">
              <a-popover>
                <template
                  #content
                  v-if="record.title && record.title.trim().length > 20"
                >
                  <div style="max-width: 120px; word-wrap: break-word">
                    {{ record.title }}
                  </div>
                </template>
                {{
                  record.title && record.title.trim().length > 20
                    ? `${record.title && record.title.substring(0, 20)}...`
                    : record.title
                }}
              </a-popover>
            </template>
            <template v-if="column.key == 'action'">
              <div class="action" style="min-width: 100px">
                <a @click="importScriptHandle(record)">导入</a>
                <a
                  @click="viewShootScriptHandle(record, createType, 'myScript')"
                  style="display: inline-block; margin: 0 5px"
                  >查看</a
                >
                <a @click="myScriptDelete(record.id, 'delete')">删除</a>
              </div>
            </template>
          </template>
        </a-table>
        <!-- 脚本广场 -->
        <h3>脚本广场</h3>
        <a-spin :spinning="tempSpining">
          <div class="script-list">
            <div
              class="script-item"
              v-for="(item, index) in templateList"
              :key="index"
              @click="viewShootScriptHandle(item, createType, 'templateScript')"
            >
              <img class="script-item-img" v-lazy="item.img" v-if="item.img" />
              <img class="script-item-img" src="" alt="" v-else />
              <div class="script-item-info">
                <a-popover v-if="item.title && item.title.trim().length > 12">
                  <template #content>
                    <div style="max-width: 120px; word-wrap: break-word">
                      {{ item.title }}
                    </div>
                  </template>
                  <h6 class="script-item-title">
                    <span>
                      {{
                        item.title && item.title.trim().length > 12
                          ? `${item.title && item.title.substring(0, 12)}...`
                          : item.title
                      }}</span
                    >
                  </h6>
                </a-popover>
                <h6 class="script-item-title" v-else>
                  <span>{{ item.title }}</span>
                </h6>
                <a-popover v-if="item.desc && item.desc.trim().length > 25">
                  <template #content>
                    <div style="max-width: 120px; word-wrap: break-word">
                      {{ item.desc }}
                    </div>
                  </template>
                  <div class="script-item-desc">
                    {{
                      item.desc && item.desc.trim().length > 25
                        ? `${item.desc && item.desc.substring(0, 25)}...`
                        : item.desc
                    }}
                  </div>
                </a-popover>
                <div class="script-item-desc" v-else>
                  {{ item.desc }}
                </div>
              </div>
            </div>
          </div>
        </a-spin>
      </a-drawer>
    </div>

    <ShootingScript ref="shootingScript" @viewImportScript="viewImportScript" />
  </a-config-provider>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  onMounted,
  computed,
  createVNode,
} from "vue";

import {
  PlusOutlined,
  SearchOutlined,
  EllipsisOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
// 导入通用工具
import { useRouter, useRoute } from "vue-router";
import request from "@/common/utils/request";
import { message, Modal } from "ant-design-vue";
// 查看脚本组件
import ShootingScript from "./ShootingScript.vue";
export default defineComponent({
  components: {
    ShootingScript,
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      list: [], //我的脚本列表
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: 80,
        },
        {
          title: "脚本名称",
          align: "center",
          dataIndex: "title",
          key: "title",
          align: "center",
        },
        {
          title: "场景数",
          align: "left",
          dataIndex: "scene_count",
          key: "scene_count",
          align: "center",
          width: 100,
        },
        {
          title: "修改时间",
          dataIndex: "updated_at",
          key: "updated_at",
          align: "center",
          sorter: true,
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          key: "created_at",
          align: "center",
          sorter: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          align: "center",
        },
      ],
      pageSize: 5, //我的脚本列表每页显示条数
      page: 1, //我的脚本列表当前页码
      total: 0, //我的脚本列表总条数
      visible: false, //控制弹窗显示隐藏
      shootingScript: null, //脚本详情
      loading: false, //脚本列表加载状态
      templateList: [], //模板广场列表
      tempPageSize: 15, //脚本广场每页显示条数
      tempPage: 1, //脚本广场当前页码
      tempTotal: 0, //脚本广场总条数
      tempSpining: true, //脚本广场加载状态
      createType: "", //创建类型
      orderBys: {}, //是否开启排序
    });
    // 分页
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: false,
      size: "small",
      showTotal: (total) => `共${total}条`,
    }));
    // 分页切换
    const handleTableChange = (pager, filter, sorter) => {
      if (sorter.column && sorter.column.key) {
        state.orderBys = {
          [sorter.column.key]: sorter.order,
        };
      }
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getMyScriptLineList();
    };
    // 打开抽屉
    const showDrawer = (createType) => {
      console.log("createType", createType);
      state.createType = createType;
      getMyScriptLineList(); //获取我的脚本列表
      getTemplateScriptLineList(); //获取模板广场列表
      state.visible = true; //打开抽屉
    };
    // 查看我的脚本
    const viewShootScriptHandle = (info, createType, viewType) => {
      state.shootingScript.showModal(info, createType, viewType);
    };
    // 获取我的脚本列表
    const getMyScriptLineList = () => {
      state.loading = true;
      const params = {
        pageSize: state.pageSize,
        page: state.page,
        type: 1,
        platform: 1,
        orderBys: state.orderBys,
      };
      request
        .get("/work_ai", "/user/shotstack/script-line/list", params)
        .then((res) => {
          console.log(res);
          state.list = res.list?.data;
          state.total = res.list?.total;
          state.loading = false;
        })
        .finally(() => {
          state.loading = false;
        });
    };
    // 删除我的脚本
    const myScriptDelete = (id) => {
      Modal.confirm({
        title: () => `确定要删除吗？`,
        content: "",
        okText: "确认",
        cancelText: "取消",
        icon: () => createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk() {
          request
            .del("/work_ai", "/user/shotstack/script-line/delete", {
              scriptLineId: id,
            })
            .then((res) => {
              if (res.result) {
                message.success("删除成功");
                getMyScriptLineList(); // 获取我的脚本列表
              }
            });
        },
        onCancel: () => {},
      });
    };
    const getContainer = () => {
      return document.querySelector(".script-wrapper");
    };
    // 导入混剪
    const importScriptHandle = (info) => {
      // 从脚本剪辑导入的
      if (state.createType == "scriptMixedCreate") {
        router.push({
          path: "/mixedCutCreat",
          query: { mixcutId: info.id, type: 0, viewType: 2 },
        });
      } else if (state.createType == "mixedCutCreat") {
        // 从混剪内点击导入脚本直接导入的
        Modal.confirm({
          title: () => `替换`,
          content:
            "导入脚本模板时，脚本文案将会覆盖原有混剪工程(素材+文案+设置) ，是否要导入",
          okText: "确认",
          cancelText: "取消",
          icon: () => createVNode(ExclamationCircleOutlined),
          centered: true,
          onOk() {
            context.emit("importScript", info);
            state.visible = false;
          },
          onCancel: () => {
            console.log("Cancel");
          },
        });
      }
    };
    // 查看弹窗内导入
    const viewImportScript = (info) => {
      state.visible = false;
      context.emit("importScript", info);
    };
    // 获取脚本广场列表
    const getTemplateScriptLineList = () => {
      state.tempSpining = true;
      const params = {
        pageSize: state.tempPageSize,
        page: state.tempPage,
        type: 0,
        platform: 1,
      };
      request
        .get("/work_ai", "/user/shotstack/script-line/list", params)
        .then((res) => {
          state.templateList = res.list?.data;
          state.tempTotal = res.list?.total;
          state.tempSpining = false;
        })
        .finally(() => {
          state.tempSpining = false;
        });
    };
    // 脚本广场分页
    const TempPageChange = (page, pageSize) => {
      state.tempPage = page;
      state.tempPageSize = pageSize;
      getTemplateScriptLineList();
    };
    return {
      ...toRefs(state),
      showDrawer,
      viewShootScriptHandle,
      getMyScriptLineList,
      pagination,
      handleTableChange,
      myScriptDelete,
      getContainer,
      importScriptHandle,
      getTemplateScriptLineList,
      TempPageChange,
      viewImportScript,
    };
  },
});
</script>

<style lang="less" scoped>
.script-wrapper {
  :deep(.ss-drawer-body) {
    // background: skyblue;
    &::-webkit-scrollbar {
      width: 6px;
      background: #ffffff;
      display: none;
    }

    &::-webkit-scrollbar-track {
      width: 5px;
      background-color: transparent;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(193, 193, 193, 0.5);
      background-clip: padding-box;
      min-height: 28px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
  }
}
.script-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  &::-webkit-scrollbar {
    width: 8px; /* 滚动条的宽度 */
    height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
  }
  &::-webkit-scrollbar-thumb {
    background: rgb(168, 168, 168); /* 滑块的背景颜色 */
    border-radius: 10px; /* 滑块的圆角 */
  }
  .script-item {
    width: 100%;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    border: 1px solid #eaedf1;
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .script-item-img {
      width: 100%;
      height: 154px;
      border: none;
      object-fit: cover;
    }
    .script-item-info {
      border-radius: 0 0 8px 8px;
      box-sizing: border-box;
      border-top: none;
      width: 100%;
      padding: 5px;
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 5px !important;
      .script-item-title {
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 使用省略号表示溢出部分 */
      }
      .script-item-desc {
        width: 100%;
        font-size: 14px;
        max-height: 42px;
        color: #737a87;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
  }
}
:deep(.ss-table-body) {
  &::-webkit-scrollbar {
    width: 6px;
    background: #ffffff;
  }

  &::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}
.action {
  a {
    color: var(--ss-primary-color);
  }
}
.smart_clip_content_pagination {
  display: flex;
  // margin-top: 10px;
  justify-content: flex-end;
}
:deep(.ss-table-pagination.ss-pagination) {
  margin: 16px 0 10px 0 !important;
}
:deep(.ss-table-tbody > tr > td) {
  padding: 5px 10px !important;
}

:deep(.ss-table-thead > tr > th) {
  padding: 9px 10px !important;
}
:deep(.ss-table-body) {
  font-size: 12px;
}
</style>
